import 'package:flutter/material.dart';
import 'package:flutter_cost/pojo/mykeyboard.dart';
import 'package:get/get.dart';

import 'logic.dart';

class BillPage extends StatelessWidget {
  final logic = Get.find<BillLogic>();
  final state = Get.find<BillLogic>().state;

  final List<Tab> _tabs = <Tab>[
    const Tab(text: '支出'),
    const Tab(text: '收入'),
    const Tab(text: '转账'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("日常账本"), centerTitle: false),
      resizeToAvoidBottomInset: false,
      body: Stack(
        children: [
          Scaffold(
            appBar: _buildTitleWidget(context),
            body: TabBarView(
              controller: logic.tabController,
              children: [
                _buildExpenditureWidget(),
                Container(
                  color: Colors.orangeAccent,
                  height: 200,
                  width: 200,
                ),
                Container(
                  color: Colors.indigo,
                  height: 200,
                  width: 200,
                ),
              ],
            ),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: _buildInputCommentWidget(context),
          )
        ],
      ),
    );
  }

  Widget _buildExpenditureWidget() {
    return GridView.builder(
      shrinkWrap: true,
      padding: EdgeInsets.zero,
      itemCount: 15,
      physics: const NeverScrollableScrollPhysics(),
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 5,
        mainAxisSpacing: 0,
        crossAxisSpacing: 0,
        childAspectRatio: 1,
      ),
      itemBuilder: (context, index) {
        return Container(
          padding: const EdgeInsets.only(top: 10),
          child: Column(
            children: [
              Image.asset(
                "assets/images/logo.png",
                width: 40,
                height: 40,
              ),
              const Text("购物"),
            ],
          ),
        );
      },
    );
  }

  Widget _buildInputCommentWidget(BuildContext context) {
    return Container(
      height: 360,
      decoration: BoxDecoration(
        color: Theme.of(context).colorScheme.background,
        borderRadius: const BorderRadius.only(
          topLeft: Radius.circular(15),
          topRight: Radius.circular(15),
        ),
      ),
      padding: const EdgeInsets.symmetric(horizontal: 10),
      child: Column(
        children: [
          _buildBudgetWidget(),
          _buildRemarkWidget(),
          _buildMinorInfoWidget(),
          _buildKeyboardWidget(),
        ],
      ),
    );
  }

  Widget _buildBudgetWidget() {
    return SizedBox(
      height: 50,
      child: Row(
        children: [
          Image.asset("assets/images/logo.png", width: 30, height: 30),
          const Expanded(
            child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 10),
              child: Text("剩余预算200"),
            ),
          ),
          const Text("0"),
        ],
      ),
    );
  }

  Widget _buildRemarkWidget() {
    return SizedBox(
      height: 50,
      child: Row(
        children: [
          Image.asset("assets/images/logo.png", width: 30, height: 30),
          const Expanded(
            child: TextField(
              maxLines: 1,
              decoration: InputDecoration(
                border: InputBorder.none,
                filled: true,
                hintText: '输入备注...',
                hintStyle: TextStyle(color: Colors.grey),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildMinorInfoWidget() {
    return Container(
      height: 40,
      color: Colors.blue,
      child: Row(
        children: const [
          Text("今天")
        ],
      ),
    );
  }

  Widget _buildKeyboardWidget() {
    return Container(
      padding: const EdgeInsets.only(top: 10),
      child: Obx(() => _buildKeyboardsWidget()),
    );
  }

  Widget _buildKeyboardsWidget() {
    return GridView.builder(
      shrinkWrap: true,
      padding: EdgeInsets.zero,
      itemCount: state.keys.length,
      physics: const NeverScrollableScrollPhysics(),
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 4,
        mainAxisSpacing: 10,
        crossAxisSpacing: 8,
        childAspectRatio: 2,
      ),
      itemBuilder: (context, index) {
        return Obx(() => _buildOptionBtnWidget(context, state.keys[index]));
      },
    );
  }

  Widget _buildOptionBtnWidget(BuildContext context, MyKeyboard item) {
    return MaterialButton(
      onPressed: () {},
      minWidth: 80,
      height: 40,
      elevation: 0,
      highlightElevation: 0,
      color: item.keyId == 15 ? state.currentItem.value == 1 ? const Color(0xFF25b87a) : state.currentItem.value == 2 ? const Color(0xFF3792fa) : const Color(0xFFeb595e) : Theme.of(context).colorScheme.onBackground,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
      child: item.keyId == 10 ? const Icon(Icons.backspace_outlined) : Text(item.showValue, style: TextStyle(color: item.keyId == 15 ? Colors.white : Theme.of(context).colorScheme.primary)),
    );
  }

  PreferredSizeWidget _buildTitleWidget(BuildContext context) {
    return PreferredSize(
      preferredSize: const Size.fromHeight(40),
      child: Align(
        alignment: Alignment.centerLeft,
        child: Container(
          color: Theme.of(context).colorScheme.background,
          width: double.infinity,
          child: TabBar(
            isScrollable: true,
            dividerColor: Colors.transparent,
            indicatorColor: const Color(0xFFFF5134),
            indicatorSize: TabBarIndicatorSize.label,
            indicatorWeight: 2,
            labelColor: Theme.of(context).colorScheme.primary,
            labelStyle: const TextStyle(fontSize: 14),
            unselectedLabelColor: const Color(0xFF999999),
            unselectedLabelStyle: const TextStyle(fontSize: 14),
            controller: logic.tabController,
            tabs: _tabs,
          ),
        ),
      ),
    );
  }
}
